<template>
    <div id="app" class="bg">
        <Meta pagealias="freelanceindex" />
        <Head>自由职业</Head>
        <div class="topbg">
            <div class="title">自由职业平台</div>
            <div class="content">你好,欢迎使用自由职业一体化平台</div>
            <div class="module">
                <router-link to="/freelance/personalinfo">
                    <img class="settlein" src="../../assets/freelance/images/index_03.png"/>
                </router-link>
                <router-link to="/freelance/release">
                    <img class="publish" src="../../assets/freelance/images/index_02.png"/>
                </router-link>
            </div>
        </div>
        <div class="prolist">
            <div class="item" v-for="(item,index) in prolist" :key="index" @click="prodetails(item.id)">
                <div class="postion">{{item.title}}</div>
                <div class="money">预算金额：<span>￥{{item.price}}</span></div>
                <div class="date">截止时间：{{item.endtime}}</div>
                <img class="recommend" src="../../assets/freelance/images/index_01.png"/>
            </div>
        </div>
        <div class="taglist clearfix" v-if="taglist">
            <div class="item" v-for="(item,index) in taglist" :key="index" @click="tagSearch(item)">{{item}}</div>
        </div>
        <div class="tab">
            <div class="btn" :class="type=='project'?'service':''" @click="tabdiv('project')"><span>服务项目</span></div>
            <div :class="type"></div>
            <div class="btn" :class="type=='resume'?'worker':''" @click="tabdiv('resume')"><span>自由工作者</span></div>
        </div>
        <van-list class="prolisttwo"
         v-if="type=='project'"
         v-model="loading"
         :finished="finished"
         :finished-text="finished_text"
         @load="onLoad"
         :immediate-check="true" >
            <div class="item" v-for="(item,index) in prolisttwo" :key="index" @click="prodetails(item.id)">
                <div class="title">
                    <div class="namecen">{{item.title}}</div>
                    <img v-if="item.is_top!=0" src="../../assets/freelance/images/resumelist_10.png"/>
                </div>
                <div class="orders">去接单</div>
                <div class="info">
                    <div class="box">
                        <div class="money">￥{{item.price}}</div>
                        <div>预算价格</div>
                    </div>
                    <div class="box day">
                        <div class="day">{{item.period}}</div>
                        <div>预计工期</div>
                    </div>
                    <div class="box">
                        <div class="date">{{item.endtime}}</div>
                        <div>接单截止</div>
                    </div>
                </div>
                <div class="claim">要求：{{item.desc}}</div>
            </div>
        </van-list>
        <van-list class="resumelist"
         v-if="type=='resume'"
         v-model="loading"
         :finished="finished"
         :finished-text="finished_text"
         @load="onLoad"
         :immediate-check="true" >
            <div class="item" v-for="(item,index) in resumelist" :key="index" @click="resdetails(item.resume_id)">
                <div class="info clearfix">
                    <div class="sny">
                        <div class="name">
                            <div class="namecen">{{item.name}}</div>
                            <img v-if="item.is_top!=0" src="../../assets/freelance/images/resumelist_10.png"/>
                        </div>
                        <div class="postion">{{item.professional_title}}</div>
                    </div>
                    <img :src="item.avatar_img"/>
                </div>
                <div class="skill">
                    <div class="namelist">
                        <div class="name" v-for="(t,k) in item.skills" :key="k">{{t.custom_name?t.custom_name:t.title}}</div>
                    </div>
                    <div class="gradient"></div>
                    <div class="num">等{{item.skills.length}}个技能</div>
                </div>
                <div class="service">服务：
                    <span class="name" v-for="(t,k) in item.services" :key="k">{{t.title}}、</span>
                </div>
            </div>
        </van-list>
        <Foodmenu></Foodmenu>
    </div>
</template>
<script>
import Foodmenu from '@/components/freelance/Foodmenu'
import http from '@/utils/http'
import apis from '@/api'
export default {
  components: {
    Foodmenu
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      type: 'project',
      params: {},
      prolist: [], // 推荐项目
      taglist: [], // 热搜标签
      prolisttwo: [], // 服务项目
      resumelist: []// 简历
    }
  },
  watch: {
    $route (to, from) {
      // 对路由变化作出响应...
      if (to.name === 'freelanceindex') {
        // 将地址栏中的url参数初始化到参数对象中
        this.page = 1
        this.fetchData(true)
      }
    }
  },
  created () {
    this.fetchData(true)
    if (this.$store.state.config.freelance_hot_words) {
      this.taglist = this.$store.state.config.freelance_hot_words.split(',')
    }
  },
  methods: {
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    tagSearch (value) {
      this.$router.push({
        path: '/freelance/project',
        query: {
          keyword: value
        }
      })
    },
    tabdiv (type) {
      this.type = type
      this.page = 1
      this.fetchData(true)
    },
    prodetails (id) {
      this.$router.push('/freelance/project/' + id)
    },
    resdetails (id) {
      this.$router.push('/freelance/resume/' + id)
    },
    fetchData (init) {
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      let api
      if (this.type == 'project') {
        api = apis.subject_list
      } else {
        api = apis.resume_list
      }

      http.get(api, conditions)
        .then(res => {
          if (this.type == 'project') {
            if (init === true) {
              this.prolist = [...res.data.recommend]
              this.prolisttwo = [...res.data.list]
            } else {
              this.prolisttwo = this.prolisttwo.concat(res.data.list)
            }
          } else {
            if (init === true) {
              this.resumelist = [...res.data.list]
            } else {
              this.resumelist = this.resumelist.concat(res.data.list)
            }
          }

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            }
          }
        }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.bg{
    width: 100vw;
    height: 100vh;
    // background-image: linear-gradient(to bottom, #f5fafe , #ffffff);
    .topbg{
        width: calc(100vw - 23px);
        height: 105px;
        margin-left: 23px;
        margin-top: 11px;
        padding-top: 10px;
        background: url('../../assets/freelance/images/index_10.png') right 0 no-repeat;
        background-size: 176px 111px;
        position: relative;
        .title{
            line-height: 1;
            font-weight: bold;
            font-size: 25px;
            color: #333333;
        }
        .content{
            line-height: 1;
            margin-top: 10px;
            font-size: 12px;
            color: #777777;
        }
        .module{
            position: absolute;
            top: 90px;
            left:-23px;
            display: flex;
            .settlein{
                margin-left: 5px;
                width: 182px;
                height: 96px;
            }
            .publish{
                margin-left: 1px;
                width: 182px;
                height: 96px;
            }
        }
    }
    .prolist{
        margin-top: 85px;
        padding-top: 38px;
        padding-bottom: 22px;
        display: flex;
        overflow-x: scroll;
        .item{
            margin-left: 12px;
            width: 276px;
            height: 121px;
            box-shadow: 0px 0px 10px rgba($color: #cccccc, $alpha: 0.8);
            background: url('../../assets/freelance/images/index_06.png') right 0 no-repeat;
            background-size: 83px 121px;
            position: relative;
            padding: 22px 22px 0px 22px;
            .recommend{
                width: 19px;
                height: 34px;
                position: absolute;
                top: 0;
                right: 5px;
            }
            .postion{
                width: 232px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 17px;
                color: #444444;
                line-height: 1;
            }
            .money{
                line-height: 1;
                margin-top: 20px;
                font-size: 13px;
                color: #555555;
                span{
                    color: #ff2626;
                }
            }
            .date{
                line-height: 1;
                margin-top: 14px;
                font-size: 13px;
                color: #555555;
            }
        }
    }
    .prolist::-webkit-scrollbar{
        display: none;
    }
    .taglist{
        .item{
            float: left;
            margin-top: 8px;
            margin-left: 12px;
            width: 109px;
            height: 35px;
            background-color: #f5f6f8;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            color: #444444;
        }
    }
    .tab{
        display: flex;
        margin-top: 31px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0px -5px 5px rgba($color: #f2f2f2, $alpha: 1);
        background-color: #fffcf3;
        position: relative;
        .btn{
            flex: 1;
            height: 53px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: #c9a01d;
            &.service{
                font-weight: bold;
                color: #333333;
                background-color: #ffffff;
                line-height: 1;
                border-top-left-radius: 20px;
                span{
                    border-bottom: 5px solid #fbca3d;
                }
            }
            &.worker{
                font-weight: bold;
                color: #333333;
                background-color: #ffffff;
                line-height: 1;
                border-top-right-radius: 20px;
                span{
                    border-bottom: 5px solid #fbca3d;
                }
            }
        }
        .project{
            position: absolute;
            top: 0;
            left: calc(50% - 10px);
            width: 0;
            height: 0px;
            border-width: 0 20px 53px 0;
            border-style: solid;
            border-color: #ffffff #fffcf3;
        }
        .resume{
            position: absolute;
            top: 0;
            left: calc(50% - 10px);
            width: 0;
            height: 0px;
            border-width: 0 0 53px 20px;
            border-style: solid;
            border-color: #ffffff #fffcf3;
        }
    }
    .prolisttwo{
        margin-top: 10px;
        .item{
            padding-top: 15px;
            position: relative;
            border-left: 21px solid #ffffff;
            border-right: 21px solid #ffffff;
            border-bottom: 1px solid #ecedf2;
            .title{
                height: 25px;
                display: flex;
                align-items: center;
                position: relative;
                .namecen{
                    line-height: 1;
                    max-width: calc(100vw - 21px - 68px - 26px);
                    font-size: 18px;
                    color: #333333;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                img{
                    margin-left: 6px;
                    width: 15px;
                    height: 15px;
                }
            }
            .orders{
                width: 62px;
                height: 25px;
                font-size: 15px;
                color: #232220;
                position: absolute;
                top:15px;
                right: -21px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #ffdb67;
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
                box-shadow: 0px 1px 7px rgba($color: #ffdb67, $alpha: 0.8);
            }
            .info{
                margin-top: 15px;
                display: flex;
                font-size: 15px;
                color: #bdbdbd;
                .box{
                    flex: 1;
                    text-align: center;
                    line-height: 1;
                    &.day{
                        border-left: 1px dashed #d5d5d5;
                        border-right: 1px dashed #d5d5d5;
                    }
                    .money{
                        font-size: 17px;
                        margin-bottom: 15px;
                        color: #ff4e00;
                    }
                    .day,.date{
                        color: #555555;
                        margin-bottom: 15px;
                    }
                }
            }
            .claim{
                margin-top: 15px;
                margin-bottom: 15px;
                font-size: 15px;
                color: #555555;
                word-break: break-all;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
    .resumelist{
        margin: 10px 21px 0px 21px;
        .item{
            border-bottom: 1px solid #ecedf2;
            padding-top: 15px;
            padding-bottom: 15px;
            .info{
                .sny{
                    float: left;
                    .name{
                        display: flex;
                        align-items: center;
                        position: relative;
                        .namecen{
                            line-height: 1;
                            max-width: calc(100vw - 42px - 65px - 21px);
                            font-size: 18px;
                            color: #333333;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        img{
                            margin-left: 6px;
                            width: 15px;
                            height: 15px;
                        }
                    }
                    .postion{
                        line-height: 1;
                        max-width: calc(100vw - 42px - 65px);
                        margin-top: 15px;
                        font-size: 17px;
                        color: #ff4e00;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                img{
                    float: right;
                    width: 52px;
                    height: 52px;
                }
            }
            .skill{
                margin-top: 15px;
                display: flex;
                align-items: center;
                position: relative;
                .namelist{
                    height: 25px;
                    max-width: calc(100vw - 42px - 80px);
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: flex;
                    align-items: center;
                    .name:nth-child(odd){
                        font-size: 11px;
                        margin-right: 8px;
                        border-radius: 5px;
                        padding: 3px 6px 3px 6px;
                        border: 1px solid #38c965;
                        background-color: #f6fcf8;
                        color: #38c965;
                    }
                    .name:nth-child(even){
                        font-size: 11px;
                        margin-right: 8px;
                        border-radius: 5px;
                        padding: 3px 6px 3px 6px;
                        border: 1px solid #4f81f3;
                        background-color: #f0f4fd;
                        color: #4f81f3;
                    }
                }
                .gradient{
                    position: absolute;
                    height: 25px;
                    width: 70px;
                    right: 80px;
                    background-image: linear-gradient(to right, rgba(255,255,255,0) , rgba(255,255,255,1));
                    z-index: 1;
                }
                .num{
                    float: left;
                    margin-left: 5px;
                    font-size: 13px;
                    color: #0f2948;
                    z-index: 2;
                }
            }
            .service{
                line-height: 1;
                margin-top: 15px;
                font-size: 15px;
                color: #555555;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
